<template>
	<!-- 医生--未来行程 -->
    <div>
      <div class="topBar">
        <h3>未来的预约行程</h3>
        <hr>
      </div>
      <div>
        <ul class="appointment_content content-list">
          
		  <li style="border-bottom: 1px solid black;font-size: 18px;font-weight: bold">
			  <span>病患姓名</span>
			  <span>预约时间</span>
			  <span>疫苗种类</span>
			  <span>备注</span>
			  <span>处理</span>
		  </li>
		  <span v-if="pc.length==0" style="margin-left: 25%;list-style: none">今日没有预约！</span>
          <li style="font-size: 16px;font-weight: bold" v-for="(appointment,index) in pc" :key="index">
			  <span>{{appointment.pName}}</span>
			  <span>{{appointment.aTime}}</span>
			  <span>{{appointment.vNo}}</span>
			  <span>{{appointment.pmore}}</span>
			  <Button class="mybtn" @click="toSign(appointment.cNo)">标记接种</Button>
          </li>
		  <li style="text-align: center;font-weight: bold;">处理过的</li>
		  <li style="font-size: 16px;font-weight: bold" v-for="(appointment,index) in okAppointment" :key="index">
		  			  <span>{{appointment.pName}}</span>
		  			  <span>{{appointment.aTime}}</span>
		  			  <span>{{appointment.vNo}}</span>
		  			  <span>{{appointment.pmore}}</span>
		  			  <!-- <Button class="mybtn" @click="toSign(appointment.cNo)">标记接种</Button> -->
		  </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import axios from 'axios'
  import api from '../../server/api'
  // import store from '../../vuex/store'
    export default {
        name: "AppointmentList",
        data(){
          return{
            appointment_list:[],
			okAppointment:[],
			pc:[],
			my_appointmentList:[]
          }
        },
        methods:{
         /* getAppointmentList(){
            let that=this;
            axios.get(api.doctorAppointmentList(store.state.username)).then((response)=> {
              if (response.data!=null) {
                that.appointment_list=response.data;
                console.log("查询被预约的时间");
              }
            })
          } */
		  
		  /* getAppointmentList(){
		    let that=this;
		    axios.get(api.getPatientAppointments()).then((response)=> {
		        var nowTime=new Date();
				that.appointment_lists=[];
				var appointmentObj={
					cNo:'',
					pName:'',
					aTime:'',
					vNo:'',
					pmore:''
				}
				if (response.data!=null) {
					that.appointment_list=response.data;
					console.log("长度："+that.appointment_list.length)
				  for(let i=0; i<=that.appointment_list.length;i++){
					  console.log("循环第 "+i+"次");
					  console.log(that.appointment_list[i].aTime)
					  var theTime = new Date(that.appointment_list[i].aTime).getTime(); 
					  if((theTime-nowTime.getTime())>=0){
						  appointmentObj.cNo = that.appointment_list[i].cNo;
						  appointmentObj.pName = that.appointment_list[i].pName;
						  appointmentObj.aTime = that.appointment_list[i].aTime;
						  appointmentObj.vNo = that.appointment_list[i].vNo;
						  appointmentObj.pmore = that.appointment_list[i].pmore;
						  that.appointment_lists.push(appointmentObj);
					  }
				  }
				  for(let i = 0;i<that.appointment_lists.length;i++){
					  console.log(that.appointment_lists[i].cNo+"-"+that.appointment_lists[i].pName+"-"+that.appointment_lists[i].Time+"-"+that.appointment_lists[i].vNo+"-"+that.appointment_lists[i].pmore);
				  }	
		        console.log("查询被预约的时间");
		      }
		    })
		  } */	
		  toSign(cNo){
			  axios.put(api.toSign(cNo)).then((res)=>{
				  if(res.data==1){
					  this.$Message.info("标记成功！！！");
				  }else{
					  this.$Message.info("标记失败！！！");
				  }
				  this.getAppointmentList();
			  })
			  
		  },
		getAppointmentList(){
		  let that=this;
		  axios.get(api.getPatientAppointments()).then((res)=> {
				console.log(res.data);
				that.pc=[];
				that.okAppointment=[];
				that.my_appointmentList=[];
				for (let i=0;i<res.data.length;i++){
				var appointmentObj={
				  cNo:'',
				  pName:'',
				  aTime:'',
				  vNo:'',
				  pmore:''
				  };
				  var my_appointmentObject={
					  cNo:'',
					  aTime:''
				  };
				  let result = that.systemTimeAndAppointTime(res.data[i].aTime);
				  console.log("时间相减结果: "+result);
				  appointmentObj.cNo=res.data[i].cNo;
				  my_appointmentObject.cNo=res.data[i].cNo;
				  appointmentObj.pName=res.data[i].pName;
				  appointmentObj.aTime=res.data[i].aTime;
				  my_appointmentObject.aTime=res.data[i].aTime;
				  appointmentObj.vNo=res.data[i].vNo;
				  appointmentObj.pmore=res.data[i].pmore;
				  appointmentObj.state=res.data[i].state;
				  if(result>=0){
					  if(res.data[i].state==1){
						that.pc.push(appointmentObj);
					    that.my_appointmentList.push(my_appointmentObject);
					  }else{
						  that.okAppointment.push(appointmentObj);
					  }					  
				  }
				  
				  }
		  })
		},
		systemTimeAndAppointTime(aTime){
		  var currentTime=new Date();
		  // console.log("当前时间"+currentTime);
		  // console.log("月："+currentTime.getMonth()+1);
		  var appointTime=new Date(aTime);
		  // console.log("预约时间"+appointTime);
		  // console.log("当前时间的getTime()="+currentTime.getTime());
		  // console.log("预约时间的getTime()="+appointTime.getTime());
		  if (appointTime.getTime()-currentTime.getTime()>=0){
		    return 1;//未来时间
		  }
		  return -1;//过时时间
		}
		  
        },
      mounted(){
          //挂载
          this.getAppointmentList();
      }
    }
</script>

<style scoped>
  .topBar{
    margin:0px 0px 15px 0px;
  }
  .topBar>hr{
    margin-top: 5px;
    height: 3px;
    background-color: #e8e8e8;
  }
  .appointment_content{
    /*border: 1px solid red;*/
    margin: 5px 0px;
    padding: 5px 25px;
    font-size: 14px;
  }
  .appointment_content>li{
    list-style-type:circle;
    line-height: 2em;
    padding: 0 25px;
  }
  .appointment_content:nth-of-type(even){
    background-color: silver;
  }
  
  
  .content-list>li{
    list-style: none;
    line-height: 2em;
    margin: 0;
  }
  .content-list>li:not(:first-child){
    line-height: 3em;
  }
  .content-list>li:nth-child(even){
    background-color: rgba(201,199,255,0.71);
  }
  .content-list>li>span{
    display: inline-block;
    width: 19%;
    /*border: 1px solid black;*/
    text-align: center;
  }
  .content-list>li>.mybtn{
    /*height: 25px;*/
	background-color: lightseagreen;
	margin-left: 30px;
    width: 150px;
  }
  .mybtn:hover{
	  color: aliceblue;
	  font-weight: bold;
  }
</style>
